<template>
  <div class="flow-track" style="height: 100%; min-height: 300px">
    <div v-show="currentTab == 'list'" class="flow-list table-wrapper">
      <AvicTable
        bordered
        :show-table-setting="true"
        :columns="tableColumns"
        :row-key="(record) => record.dbid"
        :data-source="tableData"
        :page-parameter="queryParam.pageParameter"
        :total="totalPage"
        :scroll="{ y: 100 }"
        :auto-height="true"
        @refresh="refreshFlowTracking"
        @change="handleTableChange"
      >
        <template #toolBarRight>
          <a-input-search
            class="opt-btn-commonsearch"
            style="width: 260px"
            placeholder="请输入处理人或节点名称查询"
            title="请输入处理人或节点名称查询"
            :allow-clear="true"
            @search="handleKeyWordQuery"
          />
        </template>
        <template #bodyCell="{ column, text, record, index }">
          <template v-if="column.dataIndex === 'endTime'">
            {{ record.eTime }}
          </template>
          <template v-else-if="column.dataIndex === 'intoTime'">
            {{ record.iTime }}
          </template>
          <template v-else-if="column.dataIndex === 'openTime'">
            {{ record.oTime }}
          </template>
        </template>
      </AvicTable>
      <avic-error-card v-if="tableError" :error-message="tableError" />
    </div>
    <div v-show="currentTab == 'tracking'" class="flow-list">
      <div v-if="!timelineError && flowDetailStyle === 'default'">
        <a-spin :spinning="loading">
          <div class="timeline-box">
            <a-timeline>
              <a-timeline-item v-for="(item, g) in timeLineList" :key="g">
                <template #dot>
                  <avic-icon svg="avic-time-line" style="font-size: 1.1em; color: #1f76cb" />
                </template>
                <div class="flow-list-item">
                  <span class="default-box">{{ item.eTime }}</span>
                  <div class="right-text">
                    <span class="text-box">{{ item.operateUserName }}（{{ item.assigneeDeptName }}）</span>
                    <span class="default-box">在</span>
                    <span class="text-box currentActiveLabel">{{ item.currentActiveLabel }}</span>
                    <span class="default-box">节点进行了</span>
                    <span class="text-box opType">{{ item.opType }}</span>
                    <span class="default-box">操作</span>
                    <span v-if="item.targetuser">
                      <span class="default-box">&nbsp;&nbsp;&nbsp;&nbsp;接收人：</span>
                      <span v-if="item.targetuser.split(',').length < 3" class="text-box">
                        {{ item.targetuser }}
                      </span>
                      <span v-if="item.targetuser.split(',').length == 3" class="text-box">
                        {{ item.targetuser.split(',')[0] }},{{ item.targetuser.split(',')[1] }},{{ item.targetuser.split(',')[2] }}
                      </span>
                      <span v-if="item.targetuser.split(',').length > 3">
                        <a-tooltip placement="rightTop">
                          <template #title>
                            <span>{{ item.targetuser }}</span>
                          </template>
                          <avic-icon svg="avic-more-fill" color="#1f76c8" />
                        </a-tooltip>
                      </span>
                    </span>
                    <div v-if="item.message" class="describe-box">
                      <avic-icon
                        v-if="item.collapsed"
                        svg="avic-arrow-down-s-line"
                        class="idea-collapse-icon"
                        @click="() => (item.collapsed = !item.collapsed)"
                      />
                      <avic-icon
                        v-else
                        svg="avic-arrow-up-s-line"
                        class="idea-collapse-icon"
                        @click="() => (item.collapsed = !item.collapsed)"
                      />
                      <p style="margin: 0.2em" :class="{ 'describe-box-collapsed': item.collapsed }">{{ item.message }}</p>
                    </div>
                  </div>
                </div>
              </a-timeline-item>
            </a-timeline>
          </div>
          <a-empty v-if="!timelist || timelist.length == 0" :image="simpleImage" />
        </a-spin>
      </div>
      <avic-error-card v-if="timelineError" :error-message="timelineError" />
    </div>
  </div>
</template>
<script>
import { Timeline, Empty } from 'ant-design-vue';
import AvicErrorCard from '@/components/error-card/index.vue';
import { httpAction } from '@/api/avic/bpm/FlowUtilApi';
export default {
  name: 'AvicBpmTrackingTemplate',
  components: {
    ATimeline: Timeline,
    ATimelineItem: Timeline.Item,
    AEmpty: Empty,
    AvicErrorCard
  },
  props: {
    flowParam: {
      type: Object,
      required: true,
      default: null
    },
    currentTab: {
      type: String,
      default: 'tracking'
    }
  },
  data() {
    return {
      // currentTab: 'tracking',
      tabs: [
        { id: 1, name: '列表', type: 'list' },
        { id: 2, name: '时间轴', type: 'tracking' }
      ],
      queryParam: {
        // 请求表格数据参数
        pageParameter: {
          page: 1, // 页数
          rows: 20 // 每页条数
        },
        searchParams: {
          processInstanceId: null
        },
        keyWord: '', // 快速查询数据
        sidx: null, // 排序字段
        sord: null // 排序方式: desc降序 asc升序
      },
      totalPage: 0,
      bigTableRefName: 'bigTable',
      tableError: '',
      tableLoading: false, // 加载动画
      timelineError: '',
      tableColumns: [
        {
          title: '节点',
          dataIndex: 'currentActiveLabel',
          width: 120
        },
        {
          title: '处理人',
          dataIndex: 'assigneeName',
          width: 140
        },
        {
          title: '处理人部门',
          ellipsis: true,
          dataIndex: 'assigneeDeptName',
          width: 140
        },
        {
          title: '接收时间',
          dataIndex: 'intoTime',
          align: 'center',
          ellipsis: true,
          width: 180,
          sorter: true
        },
        {
          title: '打开时间',
          dataIndex: 'openTime',
          align: 'center',
          width: 180,
          sorter: true
        },
        {
          title: '处理时间',
          dataIndex: 'endTime',
          width: 180,
          align: 'center',
          sorter: true
        },
        // {
        //   title: '处理意见',
        //   dataIndex: 'message',
        //   ellipsis: 'true',
        //   resizable: true,
        //   minWidth: 150,
        //   tooltip: { title: ({ value }) => value, placement: 'topLeft' }
        // },
        {
          title: '处理意见',
          dataIndex: 'message',
          // ellipsis: 'true',
          autoHeight: true,
          // tooltip: { title: ({ value }) => value, placement: 'topLeft' }
          resizable: true,
          minWidth: 250
        },
        {
          title: '操作类型',
          dataIndex: 'opType',
          width: 150
        },
        {
          title: '累计时间',
          dataIndex: 'useTime',
          resizable: true,
          ellipsis: true,
          width: 180
        },
        {
          title: '接收人',
          ellipsis: true,
          dataIndex: 'targetuser',
          resizable: true,
          width: 200
        }
      ],
      pagination: {
        showQuickJumper: false,
        showSizeChanger: false
      },
      tableData: [],
      timelist: [],
      data: {},
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      loading: false
    };
  },
  computed: {
    // 获取表格数据
    timeLineList() {
      const list = [];
      this.timelist?.map((item) => list.push(...item));
      return list;
    },
    flowDetailStyle() {
      return window.$config.flow?.flowDetailStyle;
    }
  },
  methods: {
    // 刷新页面
    refreshFlowTracking() {
      this.loadData();
      if (this.flowDetailStyle === 'default') {
        this.loadTimeLine();
      }
    },
    // 切换按钮
    changeHeadTag(e) {
      this.currentTab = e.type;
    },
    // 处理列表数据合并列
    // filterTableData(data) {
    //   const tableData = [];
    //   this.tableLoading = true;
    //   if (data) {
    //     this.data.tracklist.forEach((tim) => {
    //       if (tim.length === 1) {
    //         tableData.push(tim[0]);
    //       } else {
    //         tim.forEach((list, index) => {
    //           if (index !== 0) {
    //             list.rowSpan = 0;
    //           } else {
    //             list.rowSpan = tim.length;
    //           }
    //           tableData.push(list);
    //         });
    //       }
    //     });
    //   }
    //   this.tableData = tableData;
    //   // this.totalPage = tableData.length;
    //   this.tableLoading = false;
    // },
    // 加载数据
    loadData() {
      if (this.flowParam && this.flowParam.trackUrl && this.flowParam.parameter && this.flowParam.parameter.entryId) {
        this.loading = true;
        this.queryParam.searchParams.processInstanceId = this.flowParam.parameter.entryId;
        httpAction(this.flowParam.trackUrl, this.queryParam, this.flowParam.method)
          .then((res) => {
            if (res.success) {
              this.tableData = res.data.rows;
              this.totalPage = res.data.totalCount;
              // this.filterTableData(this.data.rows);
            }
            this.loading = false;
          })
          .catch(() => {
            this.tableData = [];
            this.totalPage = 0;
            this.tableError = '流程加载失败';
            this.loading = false;
          });
      }
    },
    // 加载时间线
    loadTimeLine() {
      if (this.flowParam && this.flowParam.timeLineUrl && this.flowParam.parameter && this.flowParam.parameter.entryId) {
        this.loading = true;
        this.queryParam.searchParams.processInstanceId = this.flowParam.parameter.entryId;
        httpAction(this.flowParam.timeLineUrl, this.flowParam.parameter, this.flowParam.method)
          .then((res) => {
            if (res.success) {
              this.timelist = res.data.timelist;
            }
            this.loading = false;
          })
          .catch(() => {
            this.timelineError = '流程加载失败';
            this.loading = false;
          });
      }
    },
    /** 快速查询逻辑 */
    handleKeyWordQuery(value) {
      this.queryParam.keyWord = value;
      this.queryParam.pageParameter.page = 1;
      this.loadData();
    },
    /** 表格排序 */
    handleTableChange(pagination, filters, sorter) {
      this.queryParam.pageParameter.page = pagination.current;
      this.queryParam.pageParameter.rows = pagination.pageSize;
      if (this.$objIsNotBlank(sorter.field)) {
        this.queryParam.sidx = sorter.field;
        this.queryParam.sord = sorter.order === 'ascend' ? 'asc' : 'desc'; // 排序方式: desc降序 asc升序
      }
      this.loadData();
    }
  }
};
</script>
<style lang="less" scoped>
:deep(.ant-tooltip) {
  max-width: 80%;
}
.ant-timeline {
  padding: 6px 0 0 6px;
}
.flow-list {
  padding: 0;
  height: 100%;
  min-height: 300px;
}
.flow-list-item {
  display: flex;
  flex-direction: column;
  > .default-box {
    flex-shrink: 0;
    font-size: 12px;
    margin-right: 16px;
    color: @text-color-secondary;
  }
  .right-text {
    margin: 4px 0 0 0;
    .default-box {
      margin: 0 4px;
    }
    .text-box {
      // color: @primary-color;
      // font-weight: 600;
      &.currentActiveLabel {
        // color: #ff7d00;
        color: @primary-color;
      }
    }
    .opType {
      // color: #0fc6c2;
      color: @primary-color;
    }
  }
  .describe-box {
    border-radius: 4px;
    background-color: #f7f8fa;
    padding: 2px 36px 2px 2px;
    line-height: 1.2;
    margin-top: 4px;

    .describe-box-collapsed {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: keep-all;
      overflow-wrap: break-word;
      -webkit-font-smoothing: subpixel-antialiased;
    }
    .svg-icon {
      margin-right: 4px;
      color: @primary-color;
      vertical-align: -2.125px;
    }
    .idea-collapse-icon {
      position: absolute;
      right: 4px;
      font-size: 16px;
      color: @primary-color;
      margin: 0 4px;
      cursor: pointer;
    }
  }
}
</style>
